<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>党组织活动类型</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/learning garden.css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../../mock/mock/mock-min.js"></script>
    <script type="text/javascript" src="../../mock/mock1.js"></script>

    <style>
        .chaxun {
            display: inline;
            width: 90%;
            margin-right: 20px;
        }
        
        .dignbuanniu {
            margin: 15px 0;
        }
        
        .dingbuyihang {
            padding: 0px 10px;
            width: 90%;
        }
        /*水平竖直居中  */
        
        .juzhong {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .xingzhengcunxinxitianjia {
            width: 60%;
        }
        
        .hanggao {
            margin: 40px 0px;
        }
        
        .xiangqingtitle {
            color: #999;
        }
        
        .xiangqingcontent {
            text-align: center;
            width: 50%;
        }
        
        .xiangqingjianjie {
            width: auto;
            text-align: left;
            text-indent: 40px;
            padding: 9px 40px;
        }
    </style>
</head>

<body>
    <div style="padding: 20px; background-color: #f2f2f2;">
        <div class="layui-card layui-col-space15" style="padding: 20px; background-color: #fff;">
            <div class="layui-card-body">
                <!-- 顶部按钮 -->
                <form class="layui-form" action="" lay-filter="saixuan">
                    <div class="layui-row">

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="tianjia()">
                        <i class="layui-icon layui-icon-addition"></i>&nbsp;&nbsp;添加
                      </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn layui-btn-danger" onclick="shanchucheck()">
                        <i class="layui-icon layui-icon-delete"></i>&nbsp;&nbsp;删除
                      </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu"></div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="qu1" name="areaId" lay-verify="required"  lay-filter="qu1">
                                    <option value="">地区筛选(区/县)</option>
                                </select>
                            </label>
                        </div>

                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <label class="layui-form-label dingbuyihang">
                                <select id="zhen1" name="townid" lay-verify="required" name="townId" lay-filter="zhen1">
                                    <option value="">地区筛选(镇/街道)</option>
                                </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">

                            <label class="layui-form-label dingbuyihang">
                        <select name="villageId" lay-verify="required" id="cun1" name="villageId">
                            <option value="">地区筛选(村)</option>
                        </select>
                            </label>
                        </div>
                        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 dignbuanniu">
                            <input type="text" name="keyWords" required lay-verify="required" placeholder="查询内容或字段" autocomplete="off" class="layui-input chaxun">
                        </div>
                        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 dignbuanniu">
                            <button type="button" class="layui-btn" onclick="chaxun()">
                                <i class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;查询
                              </button>
                        </div>

                    </div>
                </form>
                <div class="table">
                    <table id="demo" lay-filter="test"></table>
                </div>

            </div>
        </div>
    </div>
</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" id="btn2" lay-event="edit" style="background-color: #1E9FFF;">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!-- 表格 -->
<script type="text/javascript">
    var table
    var option
    var form
    var laydate
    layui.use(["upload", "laydate", "table", "jquery", "form"], function() {
        table = layui.table;
        form = layui.form;
        laydate = layui.laydate;
        upload = layui.upload;

        form.render();
        // 获取所有列表数据的参数
        option = {
            id: "biaoge1",
            url: url + "orgactiontype/query",
            elem: "#demo",
            page: true,
            title: "党组织活动类型",
            size: "lg",
            method: "post",
            limits: [10, 20, 50, 100, 200, 500],
            text: {
                none: "本页暂无数据,请刷新页面", //默认：无数据。
            },
            headers: {
                token: localStorage.getItem('token')
            },
            where: {
                townId: "",
                villageId: "",
            },
            request: {
                pageName: "currentPage", //页码的参数名称，默认：page
                limitName: "size", //每页数据量的参数名，默认：limit
            },
            page: {
                curr: 1 //重新从第 1 页开始
            },
            parseData: function(res) {
                if (res.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }
                //res 即为原始返回的数据
                return {
                    code: 0, //解析接口状态
                    msg: res.msg, //解析提示文本
                    count: res.data.count, //解析数据长度
                    data: setdata(res.data.orgActionTypeList), //解析数据列表
                };
            },
            cols: [
                [{
                    type: 'checkbox',
                }, {
                    title: '序号',
                    type: 'numbers',
                }, {
                    field: 'townname',
                    title: '所属街道',
                    align: 'center',
                }, {
                    field: 'villagename',
                    title: '所属村',
                    align: 'center',
                }, {
                    field: 'name',
                    title: '党组织活动类型',
                    sort: true,
                    align: 'center',
                }, {
                    field: 'caozuo',
                    title: '操作',
                    align: 'center',
                    toolbar: '#barDemo',
                }, ]
            ],
        };
        tableIns = table.render(option);

        table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.open({
                    type: 1,
                    title: "删除",
                    offset: "auto",
                    content: `<div style="font-size: 20px;line-height: 100px;text-align: center;">确认删除</div>`,
                    content: `<div style="font-size: 14px; color: #606266;line-height: 100px;height: 92px;text-align: center;">确认要删除当前项吗!</div>`,
                    area: ["350px", "200px"],
                    btn: ["删除", "取消"], //可以无限个按钮
                    btn1: function() {
                        var data = {};
                        data.IdList = obj.data.id
                        console.log(data)
                        $.ajax({
                            url: url + "orgactiontype/del",
                            method: "post",
                            data: data,
                            success: function(data) {
                                console.log(data);
                                table.reload("biaoge1", option);
                                layer.msg('删除成功!')
                            },
                            error: function(err) {},
                        });
                        layer.closeAll();
                    },
                    btn2: function() {
                        layer.msg("已取消操作");
                    },
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    title: '<span>编辑</span>',
                    type: '0',
                    area: ["700px", "480px"],
                    content: `<div class="juzhong">
				<form class="layui-form xingzhengcunxinxitianjia" id="shangchuan" lay-filter="bianji" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" value=` + obj.data.name + ` name="name" required lay-verify="required" placeholder="请输入村组织活动名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn bianji" lay-filter="bianji">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
</form>
</div>`,
                    // btn: ['取消','确认'],
                    success: function() {
                        // 区生成
                        areas.forEach(item => {
                            // console.log($('#zhen1')[0].innerHTML)
                            $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        })
                        towns.forEach(item => {
                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        })
                        villages.forEach(item => {
                                $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })
                            // 1.区选择
                        form.on('select(qu)', function(data) {
                            $('#zhen').empty()
                            $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                            towns.forEach(item => {
                                if (item.areaId == data.value) {
                                    $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                }
                            })
                            form.render('select', "tianjia")
                        });
                        // 2.镇监听
                        form.on('select(zhen)', function(data) {
                            $('#cun').empty()
                            $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                            villages.forEach(item => {
                                if (item.townId == data.value) {
                                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                }
                            })
                            form.render('select', "bianji")
                        });

                        console.log(obj)
                        $('#qu').val(obj.data.areaId)
                        $('#zhen').val(obj.data.townId)
                        $('#zhen').val(obj.data.townId)
                        $('#cun').val(obj.data.villageId)
                        form.render("select", "bianji");
                        $(".bianji").click(function() {
                            var data1 = form.val("bianji");
                            data1.id = obj.data.id;
                            data1.areaId = areas[0].id;
                            console.log(data1);
                            $.ajax({
                                url: url + "orgactiontype/update",
                                method: "post",
                                data: data1,
                                success: function(data) {
                                    console.log(data)
                                    if (data.code === 200) {
                                        layer.closeAll();
                                        table.reload("biaoge1", option);
                                        layer.msg('编辑成功!')
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                },
                                error: function(err) {
                                    console.log(data)
                                    layer.msg('编辑失败!')
                                },
                            });
                        });
                    },
                    // shade: [0.5,'#000']
                });
            }
        });

        //添加筛选条件
        // 区生成
        areas.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#qu1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            // 镇生成
        towns.forEach(item => {
                // console.log($('#zhen1')[0].innerHTML)
                $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
            })
            // 村生成
        form.on('select(zhen1)', function(data) {
            $('#cun1').empty()
            $('#cun1')[0].innerHTML += ` <option value="">地区筛选(村)</option>`
            villages.forEach(item => {
                if (item.townId == data.value) {
                    $('#cun1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                }
            })
            form.render('select', "saixuan")
        });
        // 1.区选择
        form.on('select(qu1)', function(data) {
            $('#zhen1').empty()
            $('#zhen1')[0].innerHTML += `    <option value="">地区筛选(区/县)</option>`
            towns.forEach(item => {
                if (item.areaId == data.value) {
                    $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                }
            })
            form.render('select', "saixuan")
        });
        form.render('select', "saixuan")
    })


    function tianjia() {
        layer.open({
            title: '<div class="title">添加</div>',
            type: 1,
            area: ["700px", "480px"],
            content: `
			<div class="juzhong">
				<form class="layui-form xingzhengcunxinxitianjia" id="shangchuan" lay-filter="tianjia" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                    <option value="">请输入所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请输入所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请输入所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" placeholder="请输入党组织活动类型名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn tijiao" lay-filter="tijiao">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
</form>
</div>
`,
            success: function() {
                areas.forEach(item => {
                    $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                towns.forEach(item => {
                    $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                villages.forEach(item => {
                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })


                // 监听每一个选择框的选择事件
                // 1.区选择
                form.on('select(qu)', function(data) {
                    $('#zhen').empty()
                    $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                    towns.forEach(item => {
                        if (item.areaId == data.value) {
                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });
                // 2.镇监听
                form.on('select(zhen)', function(data) {
                    $('#cun').empty()
                    $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                    villages.forEach(item => {
                        if (item.townId == data.value) {
                            $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        }
                    })
                    form.render('select', "tianjia")
                });

                form.render('select', "tianjia")

                $(".tijiao").click(function() {
                    var data = form.val("tianjia");
                    data.id = 0;
                    data.areaId = areas[0].id;
                    console.log(data);
                    if (data.codes != "") {
                        $.ajax({
                            url: url + "orgactiontype/add",
                            data: data,
                            method: "post",
                            success: function(data) {
                                if (data.code === 200) {
                                    layer.closeAll();
                                    table.reload("biaoge1", option);
                                    layer.msg(data.msg)
                                } else {
                                    layer.msg(data.msg)
                                }
                            },
                            error: function(err) {
                                layer.msg("添加失败")
                            },
                        });
                    }
                });
            }

        });
    }
    // 根据上面的删除check选中的进行删除
    function shanchucheck() {
        var checkStatus = table.checkStatus("biaoge1"); //idTest 即为基础参数 id 对应的值
        console.log(checkStatus.data); //获取选中行的数据
        var data = {}
        data.IdList = [];
        checkStatus.data.forEach((item) => {
            data.IdList.push(item.id);
        });
        console.log(data)
        if (data.IdList.length !== 0) {
            $.ajax({
                url: url + "orgactiontype/del",
                method: "post",
                data: data,
                traditional: true, //防止深度序列化
                success: function(data) {
                    if (data.code === 200) {
                        layer.closeAll();
                        table.reload("biaoge1", option);
                        layer.msg("删除成功")
                    } else {
                        layer.msg('删除失败')
                    }
                    console.log(data);

                },
                error: function(err) {},
            });
        } else {
            layer.msg('请选择本页要删除的项')
        }
    }
    // 预处理
    function setdata(data) {
        console.log(data)
        data.forEach(item => {
            item.townname = gettown(item.townId).name
            item.villagename = getvillage(item.villageId).name
            item.createdAt = timezhuanhuan(item.createdAt)
        })
        return data
    }

    //设置查询刷新列表
    function chaxun() {
        var data = form.val("saixuan");
        console.log(data)
        option.where.areaId = data.areaId
        option.where.townId = data.townid
        option.where.villageId = data.villageId
        option.where.title = data.keyWords
        console.log(option.where)
        table.reload("biaoge1", option);
    }
</script>

</html>